<template>
	<view class="detail">
		<view class="detail-imgs">
			<img :src="detailList.imgs" alt="" srcset=""class="imgs">
		</view>
		<view class="detail-main">
			<view class="detail-name">{{detailList.name}}</view>
			<view class="detail-tabs">
			{{detailList.tabs}}
			<!-- <view class="" v-for="item in a" :key="item"> -->  
			</view>
			<view class="details">
				<view class="detail-price">
					<view class="textprice">参考价格(均价/总价)</view> 
					<view class="price">{{detailList.price}}元/m²</view> 
				</view>
				<view class="detail-point">
					<view class="builds">建面</view> 
					<view class="point">{{detailList.point}}m²</view> 
				</view>
			</view>
			<view class="detail-area">
				<text style="color: #999;font-size: 14px;margin-right: 10px;">地址:</text> 
				{{detailList.area}}{{detailList.range}}
			</view>
			<view class="detail-type">
				<text style="color: #999;font-size: 14px;margin-right: 10px;">户型:</text> 
				{{detailList.type}}
			</view>
		</view>
		<view style="padding: 10px;width: 200px;margin:0px auto;">
			<u-button size="large" type="primary" text="免费致电" @click="click"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// {"name":"美的云溪郡",
				// "area":"仁寿县",
				// "type":"4室2厅",
				// "point":117,
				// "price":9000,
				// "range":"仁寿大道",
				// "imgs":"http://129.211.169.131:6368/imgs/1.jpg",
				// "id":1
				// "tabs":"['近地铁','公园房']"}
				detailList:{},
				a:[]
			};
		},
		onLoad(option) {
			this.detailList=JSON.parse(option.item) 
			
			// for (let key in this.detailList) {
			// 	console.log(59,key);
			// }
			
			//  this.detailList.map(function (item) {
			//     return item.tabs
			// })
			// console.log(66,newlist)
			// const aaa=[...new Set(this.detailList)]
			// console.log(aaa);
			// const lists=[...new Set(this.detailList.map(v=>{
			// 	v.tabs.join(",")
			// }))]
			// this.detailList.tabs.map(v=>{
			// 	return v
			// }).join(",");
			// console.log(58,this.a);
			// this.detailList.forEach()
			// console.log(57,lists);
			// console.log(39,this.detailList)
			// console.log(40,this.detailList.tabs);
			// var tab=this.detailList.tabs
			// var ta=tab.map(v=>{
			// 	return v
				
			// })
			// for (let key in tab) {
			// 	console.log(86,tab[key]);
			// }
			// console.log(tab);
		},
		methods:{
			detail(){
				// console.log(11);
			},
			click(){
				uni.makePhoneCall({
				  phoneNumber: '10086' //仅为示例，并非真实的电话号码
				})
			}
		}
	}
</script>

<style lang="scss">
.detail{
	.detail-imgs{
		.imgs{
			width: 765rpx;
			height: 765rpx;
		}
	}
	.detail-main{
		margin: 10px;
		
		.detail-name{
			font-weight: bold;
			margin-bottom: 10px;
		}
		.detail-tabs{
			font-size: 12px;
			color: #999;
		}
	}
	.details{
		display: flex;
		justify-content:space-between; 
		flex: 1;
		.detail-price{
			.textprice{
				font-size: 14px;
				color: #999;
			}
			.price{
				color: red;
			}
		}
		.detail-point{
			.builds{
				font-size: 14px;
				color: #999; 
			}
			.point{
				color: red;
			}
		}
	} 
	.detail-area{
		font-size: 14px;
		font-weight: bold;
		margin-top: 15px;
	}
	.detail-type{
		font-size: 14px;
		font-weight: bold;
		margin: 5px 0px;
	}
}
</style>
